<template>
	<CustomDialog
		v-model:visible="modelVisit"
		title="联系人详情"
		width="60%"
		confirmText="编辑详情"
		@confirm="confirm"
	>
		<ul>
			<li v-for="(item, index) in formList" :key="index">
				<div class="title">{{ item.title }}</div>
				<div
					class="value"
					:style="{
						border: item.props === 'businessCardUrl' ? 'none' : '',
					}"
					:title="filterOption(item)"
				>
					<img
						:src="userInfo[item.props]"
						alt=""
						v-if="item.props === 'businessCardUrl'"
					/>
					<span v-else>
						{{ filterOption(item) }}
					</span>
				</div>
			</li>
		</ul>
	</CustomDialog>
</template>

<script setup lang="ts">
import CustomDialog from '@/components/customDialog/index.vue'
import { getContactsListById, getCustomDetailByID } from '@/api/customer'
import { getCompanyMemberList } from '@/api/company'
import { userStorage } from '@/utils/storage'
import { useRouter } from 'vue-router'
const $router = useRouter()
const { employeeName } = userStorage.get()
const props = withDefaults(
	defineProps<{
		visible: boolean
		id?: any
	}>(),
	{}
)
const emits = defineEmits<{
	(fn: 'update:visible', e: any): void
}>()
const modelVisit = computed({
	get() {
		return props.visible
	},
	set(val) {
		emits('update:visible', val)
	},
})
const filterOption = (item) => {
	let result = ''
	switch (item.props) {
		case 'sex':
			result = userInfo.value[item.props]
				? userInfo.value[item.props] == 1
					? '男'
					: '女'
				: ''
			break
		case 'create':
			result = employeeName
			break
		case 'partyId':
			result = customInfo.value['partyName']
			break
		case 'managerId':
			const info = memberList.value.find((val) => {
				return val.id === customInfo.value['managerId']
			})
			result = info?.employeeName || '-'
			break
		default:
			result = userInfo.value[item.props] || '-'
	}
	return result
}
const formList = ref([
	{
		title: '姓名',
		props: 'name',
	},
	{
		title: '所属客户',
		props: 'partyId',
	},
	{
		title: '部门',
		props: 'department',
	},
	{
		title: '职务',
		props: 'position',
	},
	{
		title: '性别',
		props: 'gender',
	},
	{
		title: '关键决策人',
		props: 'isDecisionMaker',
	},
	{
		title: '常用地址',
		props: 'address',
	},
	{
		title: '微信号',
		props: 'wechat',
	},
	{
		title: '常用手机',
		props: 'mobile',
	},
	{
		title: '备用手机',
		props: 'mobileBackup',
	},
	{
		title: 'Email',
		props: 'email',
	},

	{
		title: '创建时间',
		props: 'updatedAt',
	},
	{
		title: '创建人',
		props: 'create',
	},
	{
		title: '管理者',
		props: 'managerId',
	},
	{
		title: '名片',
		props: 'businessCardUrl',
	},
])
// 获取企业员工列表
const memberList = ref([])
const getMemberList = async () => {
	const { code, data: res } = await getCompanyMemberList({
		departmentId: '',
		keyword: '',
		roupId: '',
		enterpriseId: userStorage.get().enterpriseId,
	})
	if (code === 200) {
		memberList.value = res as any
	}
}
const userInfo = ref({})
const getConsumer = async (id) => {
	try {
		const { code, data } = await getContactsListById(id)
		if (code === 200) {
			userInfo.value = data
			getCustom(data.partyId)
		}
	} catch (error) {
		return Promise.reject(error)
	}
}
// 获取客户信息
const customInfo = ref({})
const getCustom = async (id) => {
	const { code, data: res } = await getCustomDetailByID(id)
	if (code === 200) {
		console.log(res)
		customInfo.value = res
	}
}
// 前往编辑
const confirm = () => {
	$router.push({
		path: '/createUser/link',
		query: {
			preview: props.id,
		},
	})
}
watch(
	() => props.id,
	(val) => {
		if (!val) return
		getConsumer(val)
		getMemberList()
	},
	{
		immediate: true,
	}
)
</script>

<style scoped lang="less">
ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20px 15px;
	li {
		width: 48%;
		margin-bottom: 15px;
		display: flex;
		.title {
			width: 100px;
			font-weight: 400;
			font-size: 16px;
			color: #8c8c8c;
			display: flex;
			align-items: center;
		}
		.value {
			flex: 1;
			padding-bottom: 7px;
			font-size: 16px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.2);
			white-space: nowrap;
			/* 2. 隐藏超出容器的内容 */
			overflow: hidden;
			/* 3. 用省略号替代超出的文字 */
			text-overflow: ellipsis;
			> img {
				width: 300px;
				height: auto;
			}
		}
	}
}
</style>
